<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/aui-dialog.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
		<style>
			
			body,html{
				width: 100%;
				padding-bottom: 2rem;
				height:auto;
			}
			
			#tabs div:after {
				content: "";
				position: absolute;
				display: block;
				width: 0;
				height: .25rem;
				background-color: #282828;
				bottom: 0;
				left: 50%;
				transition: all .4s;
				transform: translate(-50%, 0);
			}
			
			#tabs div.active:after {
				width: 2.5rem;
			}
			
			em.down img {
				transform: rotateZ(180deg);
			}
			
			.item {
				justify-content: space-between;
				padding: 1.1rem 0;
				border-bottom: 1px #e5e5e5 solid;
				display: flex;
			}
			
			.item b {
				margin-bottom: 0.833333rem;
				display: block;
				line-height: 1.833333rem;
				font-size: 1.5rem;
			}
			
			.item em {
				display: block;
				width: 3.666666rem;
				height: 1.833333rem;
				border: 1px solid #666;
				border-radius: 0.549999rem;
				text-align: center;
				line-height: 1.833333rem;
				font-size: 1.166666rem;
			}
			
			#wpr {
				color: #666;
				font-size: 1.25rem;
				line-height: 1.5rem;
			}
			
			#wpr .item:nth-last-child(1) {
				border: none;
			}
			
			.back-c {
				background-position: center center;
				background-size: contain;
				background-repeat: no-repeat;
			}
			
			.p-r {
				position: relative;
				line-height: 33px;
			}
			
			.left span {
				float: left;
				width: 3.33rem;
				height: 3.33rem;
				display: inline;
				margin-right: .83rem;
				border-radius: 50%;
				background-position: center center;
				background-size: contain;
				background-repeat: no-repeat;
			}
			
			.buy {
				float: right;
				width: 7.083333rem;
				line-height: 2.5rem;
				background: -webkit-gradient(linear, center top, center bottom, from(#F7BA64), to(#ED8434));
				border-radius: 8.333333rem;
				font-size: 1.083333rem;
				color: #fff;
				text-align: center;
				box-shadow: 0 0.166666rem 0.416666rem 0 #F8CAA7;
			}
			
			#noneborder {
				border: none !important;
			}
			
			.ss {
				font-size: 90px
			}
			
			.clearfix :after {
				clear: both;
				content: '.';
				display: block;
				width: 0;
				height: 0;
				visibility: hidden;
			}
			
			.follow-code-top {
				position: relative;
				width: 100%;
				background: #303133;
				padding:0.8rem  2rem;
				z-index: 100;
				overflow: hidden;
				display: none;
			}
			
			.follow-code-logo {
				float: left;
				width: 4rem;
				z-index: 1000;
			}
			
			.follow-code-btn,
			.open-code-btn {
				position: absolute;
				line-height: 3.5rem;
				padding: 0 1rem;
				height: 3.5rem;
				top:1.2rem;
				right:2rem;
				text-align: center;
				color: #333333;
				background: #fbd454;
				border-radius: 2px;
			}
			
			.follow-code-container .follow-mask {
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: rgba(0, 0, 0, .3);
				z-index: 100;
			}
			
			.follow-code-container .follow-dialog {
				position: fixed;
				top: 50%;
				left: 50%;
				margin-left: -125px;
				margin-top: -140px;
				width: 250px;
				height: 280px;
				border-radius: 6px;
				background: #FFf;
				z-index: 101;
				text-align: center;
				padding: 30px 0 25px 0;
			}
			
			.follow-code-container .follow-close {
				background: url(img/close1.png) no-repeat center center;
				background-size: 100% 100%;
				position: absolute;
				right: 12px;
				top: 12px;
				height: 18px;
				width: 18px;
			}
			
			.hide {
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="follow-code-top">
			<img src="img/logo.png" class="share-user-img follow-code-logo" alt="" />
			<span style="margin-left:10px;line-height: 40px; color: white;" class="no-share-text">解读全球经典好书</span>
			<!--<div style="margin-left:50px;" class="share-user-info hide">
				<p style="font-size: 16px;margin:0;line-height:20px;" class="share-user-name"></p>
				<p style="font-size: 12px;margin:0;line-height:20px;" >邀请你免费读书，体验7天会员</p>
			</div>-->
			<div class="follow-code-btn hide" style="text-align: right;">
				关注公众号
			</div>
			<div class="open-code-btn hide" style="text-align: right;">
				打开公众号
			</div>
		</div>
		<div class="member-share-container hide" style="position: relative;">  
			<div style="position: absolute;top:15px;left:50%;-webkit-transform:translateX(-50%);text-align: center;" class="share-user-info">
				<img src="img/logo.png" class="share-user-img" style="display:inline-block;width:4rem;height:4rem;" alt="" />
				<p style="font-size: 13px;margin:5px 0 0 0;line-height:20px;color:#fff" class="share-user-name"></p>
			</div>
			<img src="img/memberShareBg.png" style="width: 100%;" alt="" />
		</div>
		<div class="follow-code-container" style="display: none;">
			<div class="follow-mask"></div>
			<div class="follow-dialog">
				<div class="follow-close">
				</div>
				<div class="follow-title" style="font-size: 16px;font-weight: bold;margin-bottom: 10px;">
					蜜读
				</div>
				<div>
					关注公众号，查看更多好书
				</div>
				<img src="img/wechatCode.png" alt="" style="width: 100px;display: inline-block;margin: 25px 0 15px 0;" />
				<div style="color:#999">
					长按识别二维码关注
				</div>
			</div>

		</div>
		<div id="content">

		</div>
		<div id="warn" style="background: rgba(0, 0, 0, 0.7);text-align: center;border-radius: 0.25rem;color: #ffffff;position: fixed;z-index: 1000;top: 45%;left: 50%;width: 8em;margin-left: -4em;height: 3rem;line-height: 3rem;display: none;">请先登录！</div>
		<!--回到首页-->
		<img class="backToHome hide" src="img/backToHome.png" style="width: 6.3rem; height: 4.9rem; bottom: 8.2rem; right: 0; position: fixed; z-index: 1000;"/>
	</body>

	<script id="detail_tem" type="text/html">
		{{if userVip.type==1&&data.isorder!=1}}
		<div id="bottomRead" style="width: 100%;height: 4.5rem;border-top: 1px solid #E5E5E5;z-index:20;overflow: hidden;position: fixed;bottom: 0;left: 0;">
			<div id="{{data.isbookshelf==0?'addBookshelf':'removeBookshelf'}}" class="col-xs-12" style="background: #fff;text-align: center;line-height:4.5rem;font-size:16px;color:{{if data.isorder==1}}#999 {{else}}#333{{/if}}">{{data.isorder==1?'已加入书架':(data.isbookshelf==0?'加入书架':'移除书架')}}</div>
		</div>
		{{/if}}
		<img src="{{data.bigimg | addUrl}}" style="width: 100%;height: 16rem;" />
		<div class="col-xs-12">
			{{if userVip.type==1}}
			<div id="tabs" style="height: 3.75rem;align-items: center;justify-content: space-around;font-size: 15px;color: #666;display: flex;background: #FFFFFF;">
				<div class="active" style="position: relative;width: 33.33%;text-align: center;height: 100%;line-height: 3.75rem;">详情</div>
				<div style="position: relative;width: 33.33%;text-align: center;height: 100%;line-height: 3.75rem;">书单</div>
				<div style="position: relative;width: 33.33%;text-align: center;height: 100%;line-height: 3.75rem;">评论</div>
			</div>
			{{/if}}
			<div id="detail" class="tab" style="padding: 1.5rem 0 0 0;">
				<div id="three" style="background: #FFFFFF;box-shadow: 0 2px 8px 0 rgba(192,192,192,0.50);border-radius: 5px;height: 8rem;">
					<div class="col-xs-4" style="height: 3.33rem;border-right:1px solid #E5E5E5;top: 50%;margin-top: -1.666rem;text-align: center;">
						<p style="color: #282828;font-size: 1.233rem;font-weight: bold;">{{data.book_count}}本</p>
						<p style="color: #666666;font-size: 1rem;">包含书籍</p>
					</div>
					<div class="col-xs-4" style="height: 3.33rem;border-right:1px solid #E5E5E5;top: 50%;margin-top: -1.666rem;text-align: center;">
						<p style="color: #282828;font-size: 1.233rem;font-weight: bold;">{{data.total_duration}}</p>
						<p style="color: #666666;font-size: 1rem;">音频时长</p>
					</div>
					<div class="col-xs-4" id="noneborder" style="height: 3.33rem;border-right:1px solid #E5E5E5;top: 50%;margin-top: -1.666rem;text-align: center;">
						<p style="color: #282828;font-size: 1.233rem;font-weight: bold;">{{data.virtual_click_count}}</p>
						<p style="color: #666666;font-size: 1rem;">学习人数</p>
					</div>
				</div>
				
				<div id="shortcut" align="center" style="background-size:100% auto;height: 3.8rem;padding: 2.5rem 0 0 0;margin-top: .5rem;display:{{if data.isorder==0}}none{{else if data.isorder==1}}block{{/if}};">

				</div>
				<div id="content_detail" align="center" style="padding: .5rem 0 0 0;">
					{{@data.content}}
				</div>
				<div class="clearfix">
					<em id="open" class="col-xs-12" align="center" style="padding: 2rem 0 2rem 0;"><var>{{if data.isorder==1}}展开{{else if data.isorder==0}}收起{{/if}}</var> <img src="icon/next.png" style="width:1.67rem;display: inline;" alt=""></em>
				</div>
			</div>
			<div class="col-xs-12" style="height: 0.5rem;width: 100%;background-color:#F8F8F8"></div>

		</div>
		{{if userVip.type==1||data.isorder==1}}
		<div class="youlike tab col-xs-12">
			<h4 class="" style="font-size: 18px;color: #282828;margin: 2.5rem 0 1.25rem 0;font-weight: 700;">书单</h4>
			<div class="wpr" style="overflow: hidden;">
				{{each data.themebook_list}}
				{{if countArr.indexOf($index) >= 0}}
				<p style="font-size: 1.8rem; font-weight: bold; color: #333333; padding-bottom: 1.5rem;">{{titleArr[countArr.indexOf($index)]}}</p>
				{{/if}}
				<div class="col-xs-12 bookdetail" data-bookid={{$value.bookid}} data-videoauthorid={{$value.videoauthorid}} data-copywriter={{$value.copywriter}} data-isorder={{data.isorder}} style="padding-right: 0;padding-left: 0;height: 12rem;margin-bottom: 2.08rem;" data-bookname={{$value.bookname}} data-bookimg={{$value.bookimg}} data-bookrecommend={{$value.bookrecommend}}>
					<div class="col-xs-4" style="padding-left: 0;padding-right: 0;height: 12rem;width: 9.17rem;">
						<a href="javascript:;" style="display:block;height: 100%;">
							<img src="{{$value.bookimg | addUrl}}" style="box-shadow:0.1rem 0.1rem 1rem #e6e6e6;width: 9.17rem;height: 12rem;margin: 0;border: 0;vertical-align: middle;border-radius: 3%/5%;">
							<em style="position: absolute;display: block;width: 1.67rem;height: 1.67rem;bottom: .12rem;right: 0rem;background: url(icon/listen.png) center center no-repeat;background-size: 100%;"></em>
						</a>
					</div>
					<div class="col-xs-8" style="height: 12rem;padding: 0 5% 0 5%;margin: 0;" onclick="">
						<div class="col-xs-12" style="padding: 0;margin: 0;">
							<p style="font-family: bolder;font-size: 16px;color: #282828">{{$value.bookname}}</p>
						</div>
						<div class="col-xs-12" style="padding: 0;">
							<p style="float:left;font-size: 12px;color: #534f4b;margin-bottom: 0;">{{$value.bookrecommend}}</p>
						</div>
						{{if progessArr[$index] == 0}}
						<p style="position: absolute;bottom:0;left:5%;margin:0;font-size: 12px;color: #999999;margin-top: 1rem;">{{$value.videoduration}}</p>
						{{else}}
						<p style="position: absolute;bottom:0;left:5%;margin:0;font-size: 12px;color: #999999;margin-top: 1rem;">{{$value.videoduration + " " + progessArr[$index]}}</p>
						{{/if}}
					</div>
					<div class="begin-read" style="position: absolute;right: 0;bottom: 0;width: 7.8rem;height:3rem;background-image: linear-gradient(-179deg, #F7BA64 0%, #fbd454 100%);box-shadow: 0 2px 5px 0 #F8CAA7;border-radius: 100px;text-align: center;color: #333333;line-height: 3.15rem;z-index: 10;font-weight: bold;">
						{{if userVip.type==1||data.isorder==1}}
						开始听书
						{{/if}}
					</div>
				</div>
				{{/each}}

			</div>
		</div>

		<div class="col-xs-12" style="height: 0.5rem;width: 100%;background-color:#F8F8F8"></div>
		<div class="col-xs-12" style="padding-bottom: 2rem;">
			<h4 class="" style="font-size: 18px;color: #282828;margin: 2.5rem 0 0 0;font-weight: 700;">相关推荐</h4>
			<div>
				{{each data.theme_recommend}}
				<div class="col-xs-12" style="height: 2.08rem;width: 100%;"></div>
				<div onclick="goTOThemeDetail({{$value.themeid}})" class="col-xs-12" style="padding-right: 0;padding-left: 0;height: 9.17rem;">
					<div class="col-xs-4" style="padding: 0 0;">
						<a href="javascript:;" style="display:block;height: 100%;">
							<img src="{{$value.img | addUrl}}" style="box-shadow:0.1rem 0.1rem 1rem #e6e6e6;width: 9.17rem;height: 9.17rem;margin: 0;border: 0;vertical-align: middle;border-radius: 3%/5%;">
						</a>
					</div>
					<div class="col-xs-8" style="padding: 0 1% 0 3%;margin: 0;height: 9.17rem;">
						<div class="col-xs-12" style="padding: 0;margin: 0;">
							<p style="font-family: bolder;font-size: 16px;line-height: 1.6rem;color: #282828;margin-bottom: 5px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis ;">{{$value.title}}</p>
							<p class="aui-ellipsis-2" style="font-size: 13px;color: #666666;">{{$value.contentabstract}}</p>

						</div>
						<div style="position: absolute;bottom: 1.3rem;">
							<span style="position:relative;top:1.1rem;float:left;left:0rem;color: #666;font-size: 1.3rem;line-height: 1.3rem;border-right:1px solid #999999;padding-right: .46rem;">{{$value.book_count}}本书</span>
							<span style="position:relative;top:1.1rem;float:left;left:0rem;color: #666;font-size: 1.3rem;line-height: 1.3rem;padding-left: .46rem;">{{$value.virtual_click_count | totalReadCount}}人在学</span>
						</div>
					</div>
				</div>
				{{/each}}
			</div>
		</div>
		{{/if}}
		<div class="col-xs-12" style="padding-bottom: 2rem;">
			<div class="comment tab" style="overflow: hidden;">
				<h4 class="" style="font-size: 18px;color: #282828;margin: 2.5rem 0 1.25rem 0;position: relative;">
				精选评论
				<div id="writeComment" style="padding:0 1.3rem;position: absolute;top:-1rem;right:0;font-size:14px;border:1px solid #ED8434;color: #ED8434;border-radius: 1.5rem; height:3rem;line-height:3rem">写评论</div>
			</h4>
				<div class="wpr">
					{{if !data.commentList}}
					<div style="text-align: center;color: #999;padding: 3rem 0;">
						与世界分享你的智慧
					</div>
					{{/if}} {{each data.commentList}}
					<div style="width: 100%;padding: 1rem 1rem;overflow: hidden;" class="border-b">
						<div class="clearfix">
							<img src="{{$value.headimg | addFaceUrl}}" style="width: 3.3333rem;height: 3.3333rem;border-radius: 100%;float:left;margin-right: 1rem;" />
							<div style="float: left;">
								<div style="color: #56ad66;">{{$value.nickname}}</div>
								<div>{{timeFormat($value.gmtCreated) }}</div>
							</div>
							<div class="col-xs-2 praise-parent" style="padding-right:0;padding-left: 0;float: right;">
								{{if $value.islike}}
									<img class="praise" data-isfavor="true" src="icon/button_praise_pressed.png30.png" alt="" style="vertical-align:middle;display:inline-block;float:left;width: 1.67rem;height: 1.67rem;border-radius: 100%;margin-left: 0.5rem;">
									{{else}}
									<img class="praise" data-isfavor="false" src="icon/dianzan@2x.png" timeDot="{{$value.id}}" style="vertical-align:middle;display:inline-block;float:left;width: 1.67rem;height: 1.67rem;border-radius: 100%;margin-left: 0.5rem;">
									{{/if}}
									<p class="count" style="float:left;line-height:1.77rem;margin-left:0.33rem;font-size:13px;color:#666666;">{{$value.likeCount||0}}</p>
							</div>
						</div>
						<div style="padding:1rem 0rem 1rem 4.3333rem;">
							{{$value.content}}
						</div>
						{{if $value.replys}}
						<div style="padding:0rem 0rem 1rem 4.3333rem;">
							<div style="background: #f3f5f7;padding: 0.5rem 0.5rem;">
								<span style="float:left;color: #5bae6b;">作者回复：</span> {{each $value.replys}}
								<div>{{$value.content}}</div>
								{{/each}}
							</div>
						</div>
						{{/if}}
					</div>
					{{/each}}
				</div>
			</div>
		</div>
		
		{{if  userVip.type != 1}}
		<div id="footer" style="width: 100%;height: 4.5rem;overflow: hidden;position: fixed;bottom: 0;left: 0;display: block;z-index: 100;">
			{{if data.isorder==1}}
			<div  class="col-xs-12" style="background: #FFFFFF;text-align: center;line-height:4.5rem;border-top: 1px solid #E5E5E5;font-size: 16px;color: #999;">
				已加入书架
			</div>
			{{else if data.activity2 == 2}}
			<div id="free-receive" class="col-xs-7" style="width: 100%; left: 0; background: #fbd454;border-top: 1px solid #fbd454;text-align: center;line-height:4.5rem;font-size:16px;color: #33333;font-weight: bold;">
				免费领取
			</div>
			{{else}}
			{{if dict}}
		        <div id="pay_book" class="col-xs-5" style="background: #FFFFFF;border-bottom: 1px solid #FFFFFF;text-align: center;border-top: 1px solid #E5E5E5;font-size: 16px;color: #282828;">
						购买¥{{data.price}}<br /><span id="" style="font-size: 12px;">优惠券已抵扣{{dict.price}}元</span>
					</div>
		        {{else}}
		        <div id="pay_book" class="col-xs-5" style="background: #FFFFFF;border-top: 1px solid #EEEEEE;text-align: center;line-height:4.58rem;font-size:16px;color: #333333;font-weight: bold;">
						购买¥{{data.price}}
				</div>
		        {{/if}}
			<div id="buy" class="col-xs-7" style="background: #fbd454;border-top: 1px solid #fbd454;text-align: center;line-height:4.5rem;font-size:16px;color: #333333;font-weight: bold;">
				{{if userVip.type==-1}}
					VIP已到期，去续费
				{{else}}
				    加入VIP，免费听书
				{{/if}}
			</div>
			{{/if}}
		</div>
		{{/if}}
	</script>
</html>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/purl.js"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var themeId = GetQueryString('themeId');
	var toast = new auiToast();
	var themeData = null;
	
	var bookId = GetQueryString("themeId");
	var unionid2 = GetQueryString("unionid2");
	var shareUserName = GetQueryString("shareUserName");
	var shareUserImg = GetQueryString("shareUserImg");
	var isLogin = GetQueryString("isLogin");
	if(isLogin!=0&&isLogin!=1)isLogin=1;
	var isorder=GetQueryString('themeisorder')
	var merchant_id = GetQueryString('merchant_id');//商户ID
	var dict;

	template.defaults.imports.isHaveFreeChapter = false;
	template.defaults.imports.timeFormat=function(str){  
	    var date=str.split(' ')[0];
		var dateStr=date.split('-')[1]+'-'+date.split('-')[2];
		var time=str.split(' ')[1]
		var timeStr=time.split(':')[0]+':'+time.split(':')[1];
		return dateStr+' '+timeStr
	}  
	
	$('.backToHome').click(function(){
	 	location.href = "index.html";
     })
	
	function goTOThemeDetail(id) {
		window.location.href = "themeDetail.html?themeId=" + id;
	}

	function colpase() {
		
		var slideState = userVip.type;
		if(isorder==1){
			slideState=isorder
		}
		if (isorder != 1 && userVip.type != 1) {
			$('.clearfix').addClass('hide');
		}else {
			$('.clearfix').removeClass('hide');
		}
		$('#open').click(function() {
			if(slideState != 1) {
				$(this).addClass('down').find('var').text('收起');
				$("#content_detail").show();
				$("#shortcut").hide();
			} else {
				$(this).removeClass('down').find('var').text('展开');
				$("#content_detail").hide();
				$("#shortcut").show();
				$('body').animate({
					scrollTop: 0
				}, 300, 'swing')
			}
			slideState = !slideState;
		})
		$('#open').trigger('click');
	}

	$(function() {
		
		function after() {
			
			$.ajax({//页面统计
				type:"get",
				url:hostUrl + "statistics/page?type=9&channel=weixin&unionid=" + unionid,
				async:true
			});
						
			$.ajax({
				type: "get",
				url: ascli(hostUrl + "product/theme/detail?token=" + token + "&themeid=" + themeId),
				async: true,
				success: function(data) {
					if (unionid2 || merchant_id) {
						$('.backToHome').removeClass('hide');
					}
					
					var arr = Array();
					var array = Array();
					var array1 = Array();
					var arr1 = Array();
					if (data.data.themedesc) {
						arr1 = data.data.themedesc.split(",");
					}
					var arr2;
					if (arr1.length > 1) {
						for (var i = 0; i < arr1.length; i ++) {
						arr2 = arr1[i].split(":");
						arr.push(arr2[0]);
						if (arr2.length == 3) {
							array.push(arr2[2]);
						}else {
							array.push(arr2[1]);
						}
					}
					var count;
					for (var i = 0; i < array.length; i ++) {
						if (i == 0) {
							count = 0;
						}else {
							count = 0;
							for (var j = 0; j < i; j ++) {
								count += parseInt(array[j]);
							}
						}
						array1.push(count);
					}
					}
					
					
					if (window.localStorage) {
					var progess;
					var bookid;
					var bookCount;
					var progessStr;
					var progessArr = new Array();
					for (var i = 0; i < data.data.themebook_list.length; i ++) {
						bookid = data.data.themebook_list[i]["bookid"];
						bookCount = localStorage.getItem(bookid + "_count");
						bookCount = parseInt(bookCount);
						progess = 0;
						if (bookCount) {
							for (var j = 0; j < bookCount; j ++) {
								var value = localStorage.getItem(bookid + "_" + j);
								if (value) {
									var timeArr = value.split("_");
									if (timeArr.length == 2) {
										currentTime = parseInt(timeArr[0]);
			                            duration = parseInt(timeArr[1]);
			                            progess += parseInt((currentTime * 100) / duration);
									}
								}
								if (j == bookCount - 1) {
									if (progess == 0 || !progess) {
			                        	   progessStr = "0";
			                        	}else {
			                        		if (parseInt(progess / bookCount) >= 100) {
			                        			progessStr = "已听完";
			                        		}else {
			                        			progessStr = "已听" + parseInt(progess / bookCount) + "%";
			                        		}
			                        	}
			                    }
							}
						} else{
							progessStr = "0";
						}
						progessArr.push(progessStr);
					}
				}
				data.progessArr = progessArr;
					
					
					data.titleArr = arr;
					data.countArr = array1;
					data.userVip = userVip;
					data.hasSubscribe=hasSubscribe;
					var userInfo = JSON.parse(sessionStorage.getItem('weixinData')).data.userInfo;
					if (merchant_id) {
				       relink = relink + encodeURIComponent('&unionid2=' + unionid + "&merchant_id=" + merchant_id)
			        }else {
				       relink = relink + encodeURIComponent('&unionid2=' + unionid)
			        }
					shareWx(data.data.title, data.data.img, data.data.contentabstract);
					if(isorder==1){
						 data.data.isorder=1;
					}else{
						isorder = data.data.isorder;
					}
					$("title").html(data.data.title);
					themeData = data;					
					$.ajax({
						type: "get",
						url: 　hostUrl + "product/comment/list?recommend=1&productId=" + themeId + "&userid=" + userId,
						async: true,
						success: function(data2) {
							data.data.commentList = data2.data.list;
							
							$.ajax({
				type:"get",
				url:ascli(hostUrl + "order/user/coupon?token=" + token),
				async:true,
				success: function(data1){
					if (data1.status == 0) {
						for (var i = 0; i < data1.data.length; i ++) {
						if (data1.data[i].status == 0) {
							dict = data1.data.dict;
						}
					}
					}
					if (dict) {
						if (data.data.price >= dict.priceSub) {
							data.data.price = data.data.price - dict.price;
							data.dict = dict;
						}
					}
					var html = template("detail_tem", data);
					document.getElementById('content').innerHTML = html;		
				}
			})

							colpase();
							myScrollTo();
							$('#tabs div').on('click', function() {
								$('#tabs div').removeClass('active');
								$(this).addClass('active')
								var zIndex = $(this).index();
								zTop = $('.tab').eq(zIndex).offset().top;
								$('body').animate({
									scrollTop: zTop - 80
								}, 300, 'swing')
							});
						}
					})
					
				}
			});
			//分享按钮和解除
			var bindAndUnbindClick=function(){
				setTimeout(function(){
					$('.open-code-btn').on('click',function(){
						location.href="auth.html";
					})
					$('.follow-code-btn').on('click',function(){
						$('.follow-code-container').show()
					})
					$('.follow-code-container .follow-close').on('click',function(){
						$('.follow-code-container').hide()
					})
					$('.follow-code-container .follow-mask').on('click',function(){
						$('.follow-code-container').hide()
					})
				},500)
			}
			//关注公众号
			var hasSubscribe = window.sessionStorage.getItem("hasSubscribe")
			if(unionid2){
				$('.follow-code-top').show()
				if(hasSubscribe=='true'){
					$('.open-code-btn').removeClass('hide')
				}else{
					$('.follow-code-btn').removeClass('hide')
				}
			}

		}
		getToken(after);

		$('body').on('click', '#writeComment', function() {
			location.href = "comment.html?type=1&productid=" + themeId;
		})

		$("body").on('click', ".praise-parent", function() {
			var _this = $(this).find('.praise')
			if(userId == 0) {
				$("#warn").show();
				setTimeout(function() {
					$("#warn").hide();
				}, 2000)
			} else {
				if(_this.attr("data-isfavor") == "false") {
					_this.attr("src", "icon/button_praise_pressed.png30.png");
					_this.attr("data-isfavor", "true");
					var s = _this.siblings('.count').html() - 0;
					_this.siblings('.count').html(s + 1);
					var url = hostUrl + "product/comment/like?id=" + _this.attr('timeDot') + "&userid=" + userId;
					$.ajax({
						type: "get",
						url: url,
						async: true,
						success: function(data) {
						}
					});
				} else {
					weekTip("您已点过赞");
				}
			}
		})
		var statisticsUrl = hostUrl + "/statistics/readtheme_count?channel=weixin&unionid=" + unionid + "&themeid=" + themeId;
		if (merchant_id) {
			 statisticsUrl += "&merchant_id=" + merchant_id;
		}
		//主题包统计
		$.ajax({
			type: "get",
			url: 　statisticsUrl,
			async: true,
			success: function(data) {
			}
		});

		$("#content").on('click', '#limitedTimeFree', function() {
			limitedTimeFree(unionid, themeId, 0);
		})

		$("#content").on('click', '.bookdetail', function() {
			var url= "bookDetail.html?bookid=" + $(this).attr('data-bookid') + "&videoauthorid=" + $(this).attr('data-videoauthorid') + "&copywriter=" + $(this).attr('data-copywriter') + "&isorder=" + $(this).attr('data-isorder') + "&themeid=" +themeId;
			if(isorder==1){
				url+='&themeisorder=1'
			}
			window.location.href =url
		})

		$('body').on('click', '.begin-read', function(e) {
			e.stopPropagation()
			e.cancelBubble = true;
			var parent = $(this).parents('.bookdetail');
			var url="chapter.html?bookid=" + parent.attr('data-bookid') + "&bookname=" + parent.attr('data-bookname') + "&bookimg=" + parent.attr('data-bookimg') + "&videoauthorid=" + parent.attr('data-videoauthorid') + "&copywriter=" + parent.attr('data-copywriter');
			if(isorder==1){
				url+='&themeisorder=1'
			}
			location.href = url
		})

		$("#content").on('click', '#buy', function() {
			var url = "memberPage.html?shareBack=1"
			if(unionid2) {
				url += '&unionid2=' + unionid2;
			}
			if (merchant_id) {
				url += '&merchant_id=' + merchant_id;
			}
			location.href = url;
		});
		
		$("#content").on('click', '#free-receive', function() {
			$.ajax({
				type:"get",
				url:hostUrl + "order/freetime?channel=weixin&userid=" + unionid + "&themeid=" + themeId + "&type=0",
				async:true,
				success:function(data) {
					if (data.status == 0) {
						location.reload();
					}
				}
			});
		});
		
		$("#content").on('click', '#pay_book', function() {
			payClick(JSON.parse(window.sessionStorage.getItem("weixinData")), 1, themeId, false,merchant_id);
		});
		
		//加入书架
		$('body').on('click', '#addBookshelf', function() {
			if(isorder) {
				return;
			}
			toast.loading({
				title: "加载中",
				duration: 2000
			});
			$.ajax({
				type: "get",
				url: hostUrl + "user/bookshelf/add?unionid=" + unionid + "&id=" + bookId,
				async: true,
				success: function(data) {
					toast.hide();
					weekTip("已加入书架");
					$('#addBookshelf').attr('id', 'removeBookshelf').html('移除书架')
				}
			});

		})
		//移除书架
		$('body').on('click', '#removeBookshelf', function() {
			if(isorder) {
				weekTip("已购主题无法移除");
				return;
			}
			toast.loading({
				title: "加载中",
				duration: 2000
			});
			$.ajax({
				type: "get",
				url: hostUrl + "user/bookshelf/del?unionid=" + unionid + "&id=" + bookId,
				async: true,
				success: function(data) {
					toast.hide();
					weekTip("已移除书架");
					$('#removeBookshelf').attr('id', 'addBookshelf').html('加入书架')
				}
			});

		})

		$('.open-code-btn').on('click', function() {
			location.href = "auth.html";
		})
		$('.follow-code-btn').on('click', function() {
			if(userVip.type == 1) {
				$('.follow-code-container').show()
			} else {
				var url = "memberPage.html";
				if (unionid2) {
					url += "?unionid2=" + unionid2;
				}
				if (merchant_id) {
				    url += '&merchant_id=' + merchant_id;
			    }
				location.href = url;
			}
		})
		$('.follow-code-container .follow-close').on('click', function() {
			$('.follow-code-container').hide()
		})
		$('.follow-code-container .follow-mask').on('click', function() {
			$('.follow-code-container').hide()
		})
	})

	$('#content').on('click', '.author', function() {
		window.location.href = "audioTransfer.html"
	})

	function myScrollTo(cur) {
		window.onscroll = function() {
			var t = document.documentElement.scrollTop || document.body.scrollTop;
			var hei1 = $("#tabToTop").height();

			if(t >= 150) {
				$("#tabs").css({
					"position": "fixed",
					"top": "0px",
					"left": "0",
					"right": "0",
					"z-index": "99"
				});

			} else {
				$("#tabs").css({
					"position": "relative",
					"top": "0",
					"left": "0",
					"right": "0",
					"z-index": "99"
				});
			}

			if(isorder) {
				if(t <= $('.tab').eq(1).offset().top - 110) {
					$('#tabs div').removeClass('active');
					$('#tabs div').eq(0).addClass('active');
				} else {
					$('#tabs div').removeClass('active');
					$('#tabs div').eq(1).addClass('active');
				}
			}
		}
	}
  var isPageHide = false;
    window.addEventListener('pageshow', function () {
        if (isPageHide) {
          location.reload()
        }
    });
    window.addEventListener('pagehide', function () {
        isPageHide = true;
    });
	
</script>